<template>

    <!--筛选条件-->
    <div class="shaixuan3">
        <div style="margin-top: 15px;">
             <span class="title" style="float: left;">
                <el-select v-model="userid"  filterable clearable size="small"
                           @change="getUserList" placeholder="全部销售">
                    <el-option v-for="item in salerList" :label="item.name" :value="item.userid" :key="item.index">
                    </el-option>
                </el-select>
             </span>
        </div>
        <div class="first_table">
            <el-table align="center" :data="tableData" style="width: 100%;margin-bottom: 20px;height: 650px;overflow-y: auto;" row-key="id" border stripe default-expand-all v-loading="loading">

                <el-table-column  align="center"  header-align="center" prop="wx_avatarurl" label="用户头像">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.wx_avatarurl" fit="fill" style="width: 50px;height: 50px;"></el-image>
                    </template>
                </el-table-column>
                
                <el-table-column header-align="center" align="center" prop="nickname" label="用户昵称">
                </el-table-column>

                <el-table-column header-align="center" align="center" prop="saler_name" label="所属销售">
                </el-table-column>

            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>

import {getSalerList,getLineUser,getPinglunList} from '@/api/live/liveonline';
export default {
    name: 'OfflineList',
    props:{
        liveId:{
            type:String,
            default:''
        },
        prop_offlineUserList:{
            type:Array,
            default: []
        },
        prop_offline_total:{
            type:Number,
            default:0
        },
        prop_salerList:{
            type:Array,
            default: []
        }
    },
    data(){
        return {
            pageSize: 50, //一页显示多少条
            pageNumber: 1,
            total: this.prop_offline_total, //总页数
            input:'',
            tableData:this.prop_offlineUserList,
            loading: false,
            live_id:this.liveId,
            userid:'',
            persons_offline:0,
            salerList:this.prop_salerList,
        }
    },
    created(){

    },
    watch:{
        prop_offlineUserList(newVal) {
            this.tableData = newVal;
        },
        prop_salerList(newValue) {
            this.salerList = newValue;
        },
        prop_offline_total(newVal) {
            this.total = newVal;
        }
    },
    methods: {
        getUserList() {
            console.log('userid',this.userid);
            this.$emit('getOffLineUser',this);
            console.log('userid end');
        },
        handleSizeChange: function (e) {
            console.log(e);
            this.pageSize = e;
            this.$emit('reloadOffUserList',this);
        },
        handleCurrentChange: function (e) {
            console.log(e);
            this.pageNumber = e;
            this.$emit('reloadOffUserList',this);
        },

    },
    beforeDestroy() {
        // 清除定时器
        if (this.timerID) {
            clearInterval(this.timerID);
        }
    }
}

</script>
<style lang="scss" scoped>
.el-table::before{
    height: 0px;
}
.yixuan {
    margin: 20px;
    color: #787878;
}
</style>